<template>
  <div class="sti-wood-use-case">
    <div id="chart"></div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: '',
  props: ['dataValue'],
  data() {
    return {
      option: {},
      tempTime: [],
      datalist: []
    }
  },
  created() {

    this.tempTime = []
    this.datalist = []
    let obj = {}
    for (let key in this.dataValue) {
      this.tempTime.push(this.$moment(key * 1).format('YYYY-MM-DD'), this.dataValue[key])
      obj = {
        key: this.$moment(key * 1).format('YYYY-MM-DD'),
        value: this.dataValue[key]
      }
    }
    let productData=[];
    let num = Math.ceil(this.tempTime.length / 2);
    for(let i = 0 ;i < num; i++){
        productData.push(this.tempTime.slice(i*2,i*2+2))
    }
     this.datalist = productData
  },
  mounted() {
    this.getData()

  },
  methods: {
    getData() {
      let that = this
      function getVirtulData(year) {
        year = year || '2018';
        var date = +that.$echarts.number.parseDate(year + '-01-01');
        var end = +that.$echarts.number.parseDate((+year + 1) + '-01-01');
        var dayTime = 3600 * 24 * 1000;
        var data = [];
        // console.log(date, 'date')
        // console.log(end, 'end')
        for (var time = date; time < end; time += dayTime) {
          data.push([
            that.$echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 1000)
          ]);
        }
        return data;
      }
      var graphData = [
        // [
        //   1485878400000,
        //   260
        // ],
        // [
        //   1486137600000,
        //   200
        // ],
        // [
        //   1486569600000,
        //   279
        // ],
        // [
        //   1486915200000,
        //   847
        // ],
        // [
        //   1487347200000,
        //   241
        // ],
        // [
        //   1487779200000,
        //   411
        // ],
        // [
        //   1488124800000,
        //   985
        // ]
      ];
      var links = graphData.map(function (item, idx) {
        return {
          source: idx,
          target: idx + 1
        };
      });
      links.pop();

      let option = {
        tooltip: {
          position: 'top'
        },
        visualMap: [
          {
          show: false,
          min: 0,
          max: 1000,
          calculable: true,
          seriesIndex: [2, 3, 4],
          orient: 'horizontal',
          left: '55%',
          bottom: 20
        },
        {
          show: false,
          min: 0,
          max: 1000,
          inRange: {
            color: ['grey'],
            opacity: [0, 0.3]
          },
          controller: {
            inRange: {
              opacity: [0.3, 0.6]
            },
            outOfRange: {
              color: '#ccc'
            }
          },
          calculable: true,
          seriesIndex: [1],
          orient: 'horizontal',
          left: '10%',
          bottom: 20
        }
      ],
        calendar: [
          {
            silent: true, // 响应和触发鼠标事件
            orient: 'vertical',
            yearLabel: {
              margin: 20,
              show: false, // 控制年份显示隐藏
            },
            monthLabel: {
              show: true,
              margin: 10,
              nameMap: 'en',
              color: '#549FD3',
              fontStyle: 'normal',
              fontWeight: 'bolder',
              fontSize: '16',
              position: 'end'
            },
            dayLabel: {
              firstDay: 1,
              nameMap: 'en',
              margin: '0',
              color: '#549FD3',
              fontStyle: 'normal',
              fontWeight: 'bolder',
              fontSize: '16'
            },
            yearLabel: {
              show: true,
              margin: 10,
              // nameMap: 'en',
              color: '#549FD3',
              fontStyle: 'normal',
              fontWeight: 'bolder',
              fontSize: '16',
              position: 'left'
            },
            itemStyle: {
              color: '#193651',
              // borderColor: '#549FD3',
              borderWidth: '1',
              borderType: 'solid'
            },
            cellSize: 40,
            // left: 460,
            range: ['2018-06-21', '2018-07-20']
          }

          // {
          //   orient: 'vertical',
          //   yearLabel: {
          //     margin: 40
          //   },
          //   monthLabel: {
          //     margin: 20
          //   },
          //   cellSize: 40,
          //   top: 350,
          //   range: '2017-03'
          // },
          //  {
          //   orient: 'vertical',
          //   yearLabel: {
          //     margin: 40
          //   },
          //   dayLabel: {
          //     firstDay: 1,
          //     nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
          //   },
          //   monthLabel: {
          //     nameMap: 'cn',
          //     margin: 20
          //   },
          //   cellSize: 40,
          //   top: 350,
          //   left: 460,
          //   range: '2017-04'
          // }
        ],

        series: [
        {
          type: 'graph',
          edgeSymbol: ['none', 'arrow'],
          coordinateSystem: 'calendar',
          // data: getVirtulData(2017)
          // links: links,
          // symbolSize: 10,
          // calendarIndex: 0,
          // data: graphData
        },
        {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: this.datalist
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'calendar',
          calendarIndex: 0,
          symbolSize: function (val) {
            return val[1] / 40;
          },
          data: this.datalist
        }

        // {
        //   type: 'scatter',
        //   coordinateSystem: 'calendar',
        //   calendarIndex: 2,
        //   symbolSize: function (val) {
        //     return val[1] / 60;
        //   },

        //   data: getVirtulData(2017),
        //   // data: graphData
        // },

        // {
        //   type: 'heatmap',
        //   coordinateSystem: 'calendar',
        //   calendarIndex: 3,
        //   data: getVirtulData(2017)
        // }
      ]
      };
      let chartCont = document.getElementById('chart')
      let myChart = this.$echarts.init(chartCont);
      myChart.setOption(option, true);

    }
  }
}
/* eslint-disable */
</script>

<style lang="less">
.sti-wood-use-case{
  width: 100%;
  height:100%;
  position: relative;
  #chart{
    width: 100%;
    height: 100%;
    position: absolute;
    left:-5%;
    top:-10%;
  }
}
</style>
